<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>ECharts 2D Bar Chart with 3D Effect</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>

<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script>
        // 初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart'));

        // 柱状图的颜色数组
        var colors = [
            'rgb(55, 162, 218)',
            'rgb(50, 197, 233)',
            'rgb(103, 224, 227)',
            'rgb(255, 219, 92)'
        ];

        // 柱状图的数据
        var data = [167, 70, 134, 83];

        // Y轴的坐标轴类目名称
        var categories = ['南京', '徐州', '淮南', '安庆'];

        // 设置柱状图的配置项和数据
        var option = {
            xAxis: {
                type: 'value',
                show: false
            },
            yAxis: {
                type: 'category',
                data: categories,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true
                }
            },
            series: [{
                type: 'bar',
                data: data,
                barWidth: '60%',
                itemStyle: {
                    color: function (params) {
                        var percent = params.dataIndex / (data.length - 1);
                        return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: echarts.color.modifyHSL(colors[params.dataIndex], -0.15 * percent)
                        }, {
                            offset: 1,
                            color: echarts.color.modifyHSL(colors[params.dataIndex], 0.15 * percent)
                        }]);
                    },
                    borderColor: '#000',
                    borderWidth: 1,
                    borderType: 'solid',
                    emphasis: {
                        borderColor: '#000',
                        borderWidth: 2,
                        borderRadius: 5
                    }
                },
                label: {
                    show: true,
                    position: 'inside',
                    align: 'left',
                    formatter: function (params) {
                        return params.data;
                    }
                },
                progressive: 1000
            }],
            visualMap: {
                show: false,
                dimension: 0,
                pieces: [{
                    lte: 0,
                    color: colors[0]
                }, {
                    gt: 0,
                    lte: 1,
                    color: colors[1]
                }, {
                    gt: 1,
                    lte: 2,
                    color: colors[2]
                }, {
                    gt: 2,
                    color: colors[3]
                }]
            }
        };

        // 使用配置项和数据显示图表
        myChart.setOption(option);

        // 监听柱状图的点击事件
    </script>

</body>

</html>